<template>
    <span :class="['mapButton',{'clickActive':item.active}]" @click="clickHandle">
        {{item.name}}
    </span>
</template>
<script>
export default {
    name: 'MapButton',
    props: {
        item: Object,
        btnChange: Function
    },
    methods: {
        clickHandle() {
            this.$store.commit('clickMapButton', this.item);
            this.btnChange(this.item);
        }
    }
};
</script>
<style scoped>
.mapButton {
    background: url('../assets/img/btn-icon.png');
    background-size: 100% 100%;
    padding: 0.1rem 0.22rem;
    font-size: 0.27rem;
    cursor: pointer;
}
.mapButton:hover {
    background: url('../assets/img/float_button.png');
    background-size: 100% 100%;
    color: #ffffff;
}
.clickActive {
    background: url('../assets/img/button_clicked.png');
    background-size: 100% 100%;
    color: rgba(127, 215, 255, 0.5);
}
</style>
